<template>
  <div class="stateRecord">
    <div class="searchDiv">
      <Form :model="searchItem" :label-width="90">
        <Row :gutter="10">
          <Col span="6">
            <FormItem label="电站">
              <Select v-model="searchItem.powerStation" clearable filterable @on-change="getHd">
                <Option
                  v-for="(item, index) in powerStationList"
                  :value="item"
                  :key="index"
                >{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="HD编号">
              <Select
                v-model="searchItem.hdNumber"
                clearable
                filterable
                :disabled="HBnumberList.length == 0"
                @on-change="getJz"
              >
                <Option v-for="(item, index) in HBnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="机组编号">
              <Select
                v-model="searchItem.aircrewNumber"
                clearable
                filterable
                :disabled="JZnumberList.length == 0"
              >
                <Option v-for="(item, index) in JZnumberList" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="类型">
              <Select v-model="searchItem.alarmAlias" clearable filterable>
                <!-- <Option v-for="(item, index) in LeibieList" :value="item.displayName" :key="index">{{item.displayName}}</Option> -->
                <Option value="开机">开机</Option>
                <Option value="停机">停机</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="机组状态">
              <Select v-model="searchItem.statusDictId" clearable filterable>
                <Option v-if="searchItem.alarmAlias=='开机'" v-for="(item, index) in JZstatusList" :value="item.id" :key="index">{{item.displayName}}</Option>
                <Option v-if="searchItem.alarmAlias=='停机'" v-for="(item, index) in JZstatusList2" :value="item.id" :key="index+100">{{item.displayName}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="状态变更时刻">
              <DatePicker
                type="datetimerange"
                placeholder="选择日期和时间"
                style="width: 100%"
                @on-change="handleChangeSearchClock"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="记录人">
              <Select
                @on-change="jiluName"
                v-model="searchItem.recordName"
                label-in-value
                clearable
                filterable
              >
                <Option
                  v-for="(item, index) in peopleList"
                  :value="item.trueName"
                  :key="index"
                >{{ item.trueName }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="记录时间">
              <DatePicker
                type="datetimerange"
                placeholder="选择日期和时间"
                style="width: 100%"
                @on-change="handleChangeSearchRecordTime"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="24" style="text-align:center">
            <Button @click="searchItem.pageNo=1;search()" type="primary">查询</Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Table :loading="loading" border :columns="columns" :data="tableData"></Table>
    <Page
    show-total
      :total="total"
      show-elevator
      :current="searchItem.pageNo"
      :page-size="searchItem.pageSize"
      @on-change="pageChange"
      style="margin:20px auto;text-align:center"
    />
  </div>
</template>

<script>
import {
  addAircrewStatusRecord,
  getJiLu,
  removeAircrewStatusRecord,
  updateAircrewStatusRecord
} from "@/api/runManage";
import { getSelectOption, getAllPeople, getAllEqu } from "@/api/select";
export default {
  data() {
    return {
      loading:true,
      total: 0,
      modal1: false,
      peopleList: [],
      powerStationList: [],
      allEquList: [],
      allEquList2: [],
      HBnumberList: [],
      JZnumberList: [],
      JZstatusList: [],
       JZstatusList2: [],
      LeibieList: [],
      searchItem: {
        pageNo: 1,
        pageSize: 10
      },
      formItem: {},
      columns: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          title: "电站",
          key: "powerStation"
        },
        {
          title: "HD编号",
          key: "hdNumber"
        },
        {
          title: "机组编号",
          key: "aircrewNumber"
        },
        {
          title: "类型",
          key: "alarmAlias",
          render: (h, params) => {
            let state = "";
            if (
              params.row.alarmAlias == "正常" ||
              params.row.alarmAlias == "危险" ||
              params.row.alarmAlias == "报警"||
              params.row.alarmAlias == "开机"
            ) {
              state = "开机";
            } else {
              state = "停机";
            }
            return h("div", state);
          }
        },
        {
          title: "机组状态",
          key: "statusDisplayName"
        },
        {
          title: "状态变更时刻",
          key: "statusUpdateTime",
          width: 150
        },
        {
          title: "累计运行时间(小时)",
          key: "runningTime",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              (params.row.runningTime / (1000 * 3600)).toFixed(2) + "小时"
            );
          }
        },
        {
          title: "记录人",
          key: "recordName"
        },
        {
          title: "记录时间",
          key: "recordTime",
          width: 150
        }
      ],
      tableData: [
        {
          dianzhan: "DDDHD",
          groupCode: "D1LHP",
          hdCode: "D1",
          type: "停机",
          groupState: "备用",
          stateTime: "2019-08-15 12:23:23",
          allTime: "1456.21",
          jilu: "李小明",
          jiluTime: "2019-08-15 12:23:23"
        },
        {
          dianzhan: "DDDHD",
          groupCode: "D1LHP",
          hdCode: "D1",
          type: "停机",
          groupState: "备用",
          stateTime: "2019-08-15 12:23:23",
          allTime: "1456.21",
          jilu: "李小明",
          jiluTime: "2019-08-15 12:23:23"
        }
      ]
    };
  },
  methods: {
    jiluName(e) {
      this.searchItem.recordName = e.label;
    },
    pageChange(e) {
      this.searchItem.pageNo = e;
      console.log(this.searchItem.pageNo, "页码");
      this.search();
    },

    handleChangeSearchClock(e) {
      this.searchItem.startStatusUpdateTime = e[0];
      this.searchItem.endStatusUpdateTime = e[1];
    },
    handleChangeSearchRecordTime(e) {
      this.searchItem.startRecordTime = e[0];
      this.searchItem.endRecordTime = e[1];
    },
    //获取所有人员
    getAllPeople() {
      getAllPeople(null)
        .then(res => {
          this.peopleList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    // 获取电站类型列表
    // powerStation () {
    //   getSelectOption(
    //     {
    //       code: 'dianzhan'
    //     }
    //   ).then(res => {
    //     this.powerStationList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },
    // HBnumber () {
    //   getSelectOption(
    //     {
    //       code: 'hd_code'
    //     }
    //   ).then(res => {
    //     this.HBnumberList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },
    // JZnumber () {
    //   getSelectOption(
    //     {
    //       code: 'jizu_code'
    //     }
    //   ).then(res => {
    //     this.JZnumberList = res.data
    //   }).catch(err => {
    //     console.error('err>' + JSON.stringify(err))
    //   })
    // },

    search() {
      console.log(this.searchItem);
      getJiLu(this.searchItem)
        .then(res => {
          console.log("get search:", res);
          if (res.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading=false;
          } else {
            this.$Message.info(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    JZstatus() {
      getSelectOption({
        code: "jizhu_status"
      })
        .then(res => {
          this.JZstatusList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
      getSelectOption(
        {
          code: 'jizhu_status2'
        }
      ).then(res => {
        this.JZstatusList2 = res.data
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    Leibie() {
      getSelectOption({
        code: "catory"
      })
        .then(res => {
          this.LeibieList = res.data;
        })
        .catch(err => {
          console.error("err>" + JSON.stringify(err));
        });
    },
    getAllEqument() {
      getAllEqu(null).then(res => {
        this.allEquList = res.data;
        let arr = res.data.map(function(item) {
          return item.powerStation;
        });
        this.powerStationList = [...new Set(arr)];
      });
    },
    getHd(e) {
      this.JZnumberList = [];
      this.allEquList2 = this.allEquList.filter(item => item.powerStation == e);
      let arr2 = this.allEquList2.map(function(item) {
        return item.hdNumber;
      });
      this.HBnumberList = [...new Set(arr2)];
    },
    getJz(e) {
      let arr = this.allEquList2.filter(item => item.hdNumber == e);
      let arr2 = arr.map(function(item) {
        return item.aircrewNumber;
      });
      this.JZnumberList = [...new Set(arr2)];
    }
  },
  mounted() {
    this.getAllEqument();
    this.JZstatus();
    this.Leibie();
    this.getAllPeople();
    this.search();
  }
};
</script>

<style lang="less">
.stateRecord {
  background: #fff;
  height: 100%;
  padding: 15px;
  font-size: 14px;
  .searchDiv {
    margin-bottom: 15px;
    .marRight {
      margin-right: 15px;
    }
  }
  .ivu-form-item {
    margin-bottom: 15px;
  }
}
</style>
